<!--
 * @页面名称: 实时监控
 * @描述:
 * @作者: 辛慰
 * @Date: 2019-09-11 20:13:30
 -->

<template>
  <div class="wrap">
    <topHeader/>
    <div class="contanier" ref="container">
      <div class="content">
        <div class="select-option">
          <!-- 选择设备模块 -->
          <el-select @change="selectGet" v-model="form.region" placeholder="请选择监控机">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="tab-page">
          <!-- 设备下不同库房模块 -->
          <el-tabs type="border-card" @tab-click="handleClick" v-if="isShowTabs" style="min-height:5.8rem">
            <el-tab-pane v-for="(List,index) in roomList" :key="index" :label="List.name" :name="List.name">
              <div class="tab-content">
                <div class="time-query">
                  <!-- 日期查询模块 -->
                  <el-date-picker
                    v-model="timeArr"
                    type="daterange"
                    align="right"
                    style="width: 4rem"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="selectTIime"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </div>
                <div v-if="isShowVideo">
                  <div class="con-box" v-for="(item,index) in videoInfo" :key="index">
                    <!-- 顶部标题模块 -->
                    <p class="camera-title">{{ item.name }}</p>
                    <div class="camera-box">
                      <!-- 实时视频模块 -->
                      <div class="left">
                        <p class="l-title">实时视频</p>
                        <div class="video" ref="video">
                          <object
                            type='application/x-vlc-plugin'
                            id='Object1'
                            width="100%"
                            height="100%"
                            events='True'
                            pluginspage="http://www.videolan.org"
                            codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                            <param name='mrl' :value='item.rtsp' />
                            <param name='volume' value='50' />
                            <param name='autoplay' value='true' />
                            <param name='loop' value='false' />
                            <param value="transparent" name="wmode">
                          </object>
                        </div>
                      </div>
                      <!-- 短视频模块 -->
                      <div class="right">
                        <p class="r-title">短视频</p>
                        <div class="short-video">
                          <div v-if="changeDevice==='摄像机'">
                            <div class="short-video-item" v-for="(subItem,subIndex) in item.shortVideos" :key="subIndex" @click="reviewVideo(subItem.videourl)">
                              <img :src="baseUrl+subItem.imageurl">
                            </div>
                          </div>
                          <div v-else>
                            <div class="short-video-item" v-for="(subItem,subIndex) in item.shortVideos" :key="subIndex" @click="reviewImage(subItem.imageurl)">
                              <img :src="baseUrl+subItem.imageurl">
                            </div>
                          </div>
                          <div>
                            <el-pagination
                              :small="true"
                              @current-change="pageCurrentChange"
                              :current-page="pageIndex"
                              :page-size="20"
                              layout="total, prev, pager, next, jumper"
                              :total="total">
                            </el-pagination>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 显示短视频和图片弹框模块 -->
    <el-dialog title="查看" :visible.sync="dialogImageVisible">
      <video class="modalImg" autoplay="autoplay" controls v-if="changeDevice==='摄像机'">
        <source :src="videoList" type="video/mp4">
      </video>
      <img class="modalImg" :src="imgList" v-else/>
    </el-dialog>
  </div>
</template>

<script>
import topHeader from '@/components/public/topHeader'
import apiUrl from '@/api'
export default {
  data () {
    return {
      selectList: [], // 除了门禁机以外的设备分组数据
      form: {
        region: ''
      },
      isShowTabs: false, // tab按钮默认不显示
      isShowVideo: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeArr: [this.$dtime(new Date()).format('YYYY-MM-DD'), this.$dtime(new Date()).format('YYYY-MM-DD')], // 查询时间数组
      roomList: [], // 设备下不同库房数据
      filterData: '', // 当前设备下某一库房数据
      videoInfo: [], // 库房设备列表和设备记录集合数据
      dialogImageVisible: false, // 显示图片和短视频弹框是否显示
      videoList: '', // 弹框显示短视频数据
      imgList: '', // 弹框显示图片数据
      baseUrl: apiUrl.baseUrl,
      changeDevice: '', // 判断点击图片出现的是图片弹框还是短视频弹框
      pageIndex: 1,
      pageSize: 20,
      total: 10 // 分页总数据
    }
  },
  components: {
    topHeader
  },
  watch: {},
  created () {
    this.getTableData()
  },
  mounted () {
    // let container = this.$refs.container
  },
  methods: {
    // 获取摄像机，抓拍机，警戒机组数据
    getTableData () {
      this.$http.get('/api/Screen/GetDeviceCategory').then((res) => { // 获取设备分组
        console.log(res)
        this.selectList = res.data.data.parentcategories.filter(item => { // 拿到除了门禁机以外的设备分组
          return item.name !== '门禁机'
        })
      })
    },
    // 选择监控机下拉框获取不同的库房
    selectGet () {
      this.changeDevice = ''
      var filterList = this.selectList.filter(item => {
        return item.id === this.form.region
      })
      console.log(filterList)
      this.changeDevice = filterList[0].name
      this.roomList = filterList[0].childcategories // 拿到当前设备下不同库房数据
      this.isShowTabs = true
    },
    // 点击不同的库房获取该库房的数据
    handleClick (tab, event) {
      this.videoInfo = []
      this.filterData = this.roomList.filter(item => { // 拿到当前设备下某一库房数据
        return item.name === tab.label
      })
      this.selectTIime()
    },
    // 点击图片显示短视频
    reviewVideo (src) {
      this.videoList = this.baseUrl + src
      this.dialogImageVisible = true
    },
    // 点击图片显示图片
    reviewImage (src) {
      this.imgList = this.baseUrl + src
      this.dialogImageVisible = true
    },
    checkDisappear () {
      this.dialogImageVisible = false
    },
    // 切换分页
    pageCurrentChange (val) {
      this.pageIndex = val
      this.selectTIime()
    },
    // 选择完查看的日期后拿到数据渲染页面
    selectTIime () {
      this.videoInfo = []
      this.isShowVideo = true
      if (this.timeArr && this.timeArr.length > 0) {
        // 获取设备列表
        this.$http.get('/api/Screen/GetDeviceList', {
          params: {
            categoryId: this.filterData[0].id
          }
        }).then((res) => {
          console.log(res)
          res.data.data.forEach(item => {
            this.$http.get('/api/Screen/GetDeviceRecord', {
              params: {
                deviceId: item.id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                startDate: this.timeArr[0],
                endDate: this.timeArr[1]
              }
            }).then((res) => {
              console.log(res)
              item['shortVideos'] = res.data.data.securitydevicerecords
              this.total = res.data.data.totalcount
              this.videoInfo.push(item)
              console.log(this.videoInfo)
            })
          })
        })
      }
    }
  }
}
</script>

<style scoped>
.contanier {
  background: #f3f3f3;
}
.content {
  width: 100%;
  height: 100%;
  padding: .2rem;
  box-sizing: border-box;
}
.select-option {
  float: left;
}
.tab-page {
  background: #fff;
  margin-top: .6rem;
  color: #333;
  min-height: 5.8rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
.tab-content {
  min-height: 5.2rem;
  position: relative;
}
.time-query {
  display: flex;
  justify-content: flex-start;
}
.con-box {
  margin-bottom: .2rem;
}
.camera-title {
  height: .4rem;
  line-height: .4rem;
  font-size: .18rem;
  color: #000;
  font-weight: 700;
  margin-bottom: .2rem;
}
.camera-box {
  display: flex;
}
.left,.right {
  flex: 1;
}
.left {
  margin-right: .2rem;
}
.l-title,.r-title {
  height: .3rem;
  line-height: .3rem;
  font: bold .14rem #333;
  margin-bottom: .1rem;
}
.video {
  width: 100%;
  height: 4rem;
}
.short-video {
  width: 100%;
  height: 4rem;
  border: 1px solid #ccc;
  padding: .1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
}

.short-video-item {
  width: 18%;
  height: .8rem;
  margin-top: 10px;
  margin-right: 2%;
  float: left;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.short-video-item img {
  width: 100%;
  height: 100%;
  display: block;
}
.playIcon {
  width: .24rem;
  height: .24rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.playIcon img {
  width: 100%;
  height: 100%;
  display: block;
}
.modal{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}
.modalImg{
  width: 100%;
  height: 100%;
}
</style>
